<template>
  <div class="home">
     <v-header></v-header>
    
    <div class="section">
        <div class="sectionA">
          <div class="title">
            <h2>忘记密码</h2> 
          </div>
          <el-form class="box" :model="loginForm" ref="loginForm" :rules="formRules" >
            <el-form-item prop="usrCode">
                <div class="inputbox">
                  <label>账 号</label>
                  <el-input class="input" type="text" clearable v-model="loginForm.usrCode" placeholder="请输入账号"></el-input>
                </div>
            </el-form-item>
            <el-form-item prop="usrCellphone">
              <div class="inputbox" >
                <label>手机号</label>
                 <el-input class="input" maxlength="11" type="text" clearable v-model="loginForm.usrCellphone"  placeholder="请输入手机号"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="code">
              <div class="inputbox" >
                <label>验证码</label>
                <el-input type="text" class="input" maxlength="6" clearable v-model="loginForm.code"  placeholder="请输入验证码"></el-input>
                <button @click="getcode">{{codeText}}</button>
            </div>
            </el-form-item>
            <el-form-item prop="usrPassword">
              <div class="inputbox" >
                <label>新密码</label>
                <el-input type="text" class="input" clearable v-model="loginForm.usrPassword" placeholder="请输入新密码"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="btnbox">
                <button class="redBtn" @click="modify">重置密码</button>
              </div>
            </el-form-item>
          </el-form>
        </div>
    </div>
     <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import {InsertCode,modifyPassword}from '@/request/api'
export default {
 components: {
    VHeader,
    VFooter,
  },
  data(){
    return{
      loginForm:{
        usrCode:'',//账号
        usrCellphone:'',//手机号
        code:'',//验证码
        usrPassword:'',// 新密码
      },
      codeText: '获取验证码',
       formRules: {
        usrCellphone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^\d{11}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        code:[
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        usrCode:[
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        usrPassword:[
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ]
      }
    }
  },
  created(){

  },
  mounted(){

  },
  methods:{
  //获取验证码
    getcode(){
      if (this.codeText !== '获取验证码') {
        return
      }
      if (!this.loginForm.usrCellphone) {
        this.$alert('请输入手机号', '系统提示', {
          type: 'warning'
        })
        return
      }
      if (!/^\d{11}$/.test(this.loginForm.usrCellphone)) {
        return
      }
      InsertCode({
        dvrCtctel: this.loginForm.usrCellphone
      }).then(_ => {
        this.$alert('验证码已发送', '系统提示', {
          type: 'success'
        })
      })
      if (this.codeText == '获取验证码') {
        let num = 60
        this.codeText = `获取验证码(${num})`
        this.fnx = setInterval(() => {
          if (num > 0) {
            num--
            this.codeText = `获取验证码(${num})`
          } else {
            clearInterval(this.fnx)
            this.codeText = '获取验证码'
          }
        }, 1000)
      }
    },
    //修改密码
    modify(){
        this.$refs.loginForm.validate((validate) => {
        if (validate) {
          modifyPassword(this.loginForm).then(()=>{
              this.$message({
                  message:'修改密码成功',
                  type: 'success',
              })
              this.$router.push('/login')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error{
  position: absolute;
  top:82%;
  left: 120px;
  font-size: 15px;
}
.home{
   display: flex;
  flex-direction: column;
  height: 100%;
  .section{
      width: 100%;
      flex: 1 0 auto;
      padding: 20px 0 ;
      background: #edeff2;
        .sectionA{
            background: #fff;
            border-radius: 8px;
            padding: 30px;
            width: 1000px;
            margin: 0 auto;
            .title{
              padding-bottom: 15px;
              padding-top: 10px;
              overflow: hidden;
              border-bottom: 1px solid rgb(222, 222, 222);
              h2{
                font-size: 20px;
                font-weight: 400;
              }
            }
            .box{
              position: relative;
              min-height: 400px;
              padding: 80px 30px 50px;
              .inputbox{
                margin-bottom: 15px;
                line-height: 46px;
                position: relative;
                label{
                  display: inline-block;
                  width: 100px;
                  text-align: right;
                  padding-right: 10px;
                  font-weight: 400;
                  font-size: 16px;
                }
                .input{
                  height: 46px;
                  width: 400px;
                  // font-size: 15px;
                  // border-radius: 6px;
                  // border-width: 1px;
                  // border-style: solid;
                  // border-color: rgb(222, 222, 222);
                  // border-image: initial;
                  // padding: 0px 15px;
                }
                button{
                  position: absolute;
                  width: 150px;
                  height: 30px;
                  left: 353px;
                  top: 9px;
                  color: rgb(255, 255, 255);
                  font-size: 14px;
                  border-radius: 4px;
                  background: -webkit-linear-gradient(left, rgb(106, 138, 255), rgb(34, 180, 255));
                  border-width: initial;
                  border-style: none;
                  border-color: initial;
                  border-image: initial;
                }
              }
              .btnbox{
                padding-top: 40px;
                padding-left: 100px;
                .redBtn{
                  font-size: 18px;   
                  color: rgb(255, 255, 255);
                  width: 320px;
                  height: 46px;
                  box-shadow: rgba(255, 133, 135, 0.2) 0px 6px 12px;
                  letter-spacing: 0.5em;
                  background: -webkit-linear-gradient(left, rgb(255, 163, 133), rgb(255, 81, 139));
                  border-width: initial;
                  border-style: none;
                  border-color: initial;
                  border-image: initial;
                  border-radius: 200px;
                }
              }
            }
        }
  }
   .footer{
      flex: 0 0 auto;
  }
}
</style>